<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>课堂练习</title>
    <style>
        body,ul,li{
            padding:0;
            margin:0;
        }
        li{
            list-style:none;
            display: inline-block;
            width: 50px;
            height:50px;
            margin:5px 0;
        }
    </style>
</head>

<body>
<ul></ul>
<script src="../MyJs.js"></script>
<script>
    var Oul=document.getElementsByTagName("ul")[0];
    var arr=["pink","yellowgreen","lightblue","orange","greenyellow"];
    var str="";
    for(var i=0;i<22;i++){
        str+="<li></li>"
    }
    Oul.innerHTML=str;
    var links=Oul.getElementsByTagName("li");
    //缺点：当鼠标完全移除，页面仍有元素为灰色，无法完全去掉样式
    //    for(var i=0;i<links.length;i++){
    //        links[i].onmouseover=function(){
    //            for(var j=0;j<links.length;j++){
    //            links[j].style.backgroundColor=arr[j%(arr.length)];
    //        }
    //            this.style.backgroundColor="#ccc";
    //        }
    //    }

    //    for(var i=0;i<links.length;i++){
    //        links[i].style.backgroundColor=arr[i%(arr.length)];
    //        links[i].index=i;
    //        links[i].onmouseover=function(){
    //            this.style.backgroundColor="#ccc";
    //        }
    //        links[i].onmouseout=function(){
    //            this.style.backgroundColor=arr[this.index%(arr.length)];
    //        }
    //    }

    for(var i=0;i<links.length;i++){
        links[i].style.backgroundColor=arr[i%(arr.length)];
        links[i].onmouseover=function(){
            this.Color=getStyle(this,"backgroundColor");
            this.style.backgroundColor="#ccc";
        }
        links[i].onmouseout=function(){
            this.style.backgroundColor= this.Color;
        }
    }
</script>
</body>
</html>